<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="main-header">
      <div class="header-content">
        <!-- 左侧区域 -->
        <div class="header-left">
          <div class="logo-section">
            <img src="@/assets/logo.png" alt="logo" class="logo" @click="toWelcome">
            <span class="site-name">MicroInvest</span>
          </div>

          <!-- 主菜单 - 在桌面端显示 -->
          <nav class="main-menu desktop-menu">
            <div
                v-for="item in mainMenu"
                :key="item.id"
                class="menu-item"
                @mouseenter="showSubMenu(item.id)"
                @mouseleave="hideSubMenu(item.id)"
            >
              <span class="menu-title">
                <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
                {{ item.title }}
              </span>
              <transition name="fade-slide">
                <div v-if="activeSubMenu === item.id" class="sub-menu">
                  <div
                      v-for="subItem in item.children"
                      :key="subItem.id"
                      class="sub-menu-item"
                      @click="handleMenuClick(subItem.id)"
                  >
                    {{ subItem.title }}
                  </div>
                </div>
              </transition>
            </div>
          </nav>
        </div>

        <!-- 右侧区域 -->
        <div class="header-right">
          <!-- 搜索框 -->
          <div class="search-section">
            <el-input
                v-model="searchQuery"
                placeholder="搜索股票代码或名称"
                class="search-input"
                @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>

          <!-- 移动端搜索按钮 -->
          <div class="mi-search-section" @click="() => handleMobileSearch()">
            <el-icon class="search-icon"><Search /></el-icon>
          </div>

          <!-- 汉堡菜单按钮 -->
          <div class="hamburger-menu" @click="toggleSidebar">
            <el-icon :size="24"><Menu /></el-icon>
          </div>

          <!-- 用户资产订单管理 -->
          <el-dropdown
              v-if="hasToken"
              class="user-property-dropdown"
              @command="UserPropertyCommand"
              trigger="hover"
          >
            <div class="user-property">
              <p>资产管理</p>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="property">我的资产</el-dropdown-item>
                <el-dropdown-item command="order">委托中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- 用户头像和下拉菜单 -->
          <el-dropdown
              v-if="hasToken"
              class="user-dropdown"
              @command="handleUserCommand"
              trigger="hover"
          >
            <div class="user-avatar">
              <el-avatar :size="32" :src="userAvatar" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="security">安全中心</el-dropdown-item>
                <el-dropdown-item command="logout" @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- 如果没有 token，显示登录 / 注册 -->
          <div v-else class="login-register">
            <el-button class="login-btn" type="text" @click="goLogin">登录</el-button>
            <el-button class="register-btn" type="text" @click="goRegister">注册</el-button>
          </div>
        </div>
      </div>
    </header>

    <!-- 侧边栏 - 在移动端显示 -->
    <div class="sidebar-overlay" v-if="isSidebarOpen" @click="toggleSidebar"></div>
    <div class="sidebar" :class="{ 'sidebar-open': isSidebarOpen }">
      <div class="sidebar-header">
        <div class="logo-section">
          <img src="@/assets/logo.png" alt="logo" class="logo">
          <span class="site-name">MicroInvest</span>
        </div>
        <el-icon class="close-icon" @click="toggleSidebar"><Close /></el-icon>
      </div>

      <nav class="sidebar-menu">
        <div
            v-for="item in mainMenu"
            :key="item.id"
            class="sidebar-menu-item"
            @click="toggleSubMenu(item.id)"
        >
          <div class="sidebar-menu-title">
            <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
            <el-icon class="arrow-icon" :class="{ 'arrow-down': openSubMenu === item.id }">
              <ArrowDown />
            </el-icon>
          </div>
          <transition name="slide-fade">
            <div v-if="openSubMenu === item.id" class="sidebar-submenu">
              <div
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  class="sidebar-submenu-item"
                  @click="handleMenuClick(subItem.id)"
              >
                {{ subItem.title }}
              </div>
            </div>
          </transition>
        </div>
        <!-- 资产管理入口，仅在有token时显示 -->
        <div v-if="hasToken" class="sidebar-asset-section">
          <div class="sidebar-asset-title">资产管理</div>
          <div class="sidebar-asset-links">
            <div class="sidebar-asset-link" @click="UserPropertyCommand('property')">我的资产</div>
            <div class="sidebar-asset-link" @click="UserPropertyCommand('order')">委托中心</div>
          </div>
        </div>
      </nav>
    </div>

    <!-- 主体内容 -->
    <main class="main-content">
      <div class="content-container">
        <router-view :key="$route.fullPath" v-slot="{ Component, route }">
          <transition name="fade" mode="out-in">
            <component :is="Component" :key="route.fullPath" />
          </transition>
        </router-view>
      </div>
    </main>

    <!-- 搜索面板 -->
    <Teleport to="body">
      <div v-if="isSearchPanelOpen" class="search-panel-overlay" @click="closeSearchPanel">
        <div class="search-panel" :class="{ 'search-panel-open': isSearchPanelOpen }" @click.stop>
          <div class="search-panel-header">
            <div class="search-input-wrapper">
              <el-input
                  v-model="mobileSearchQuery"
                  placeholder="搜索股票代码或名称"
                  class="panel-search-input"
                  @keyup.enter="handleMobileSearch(mobileSearchQuery)"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            <el-icon class="close-icon" @click="closeSearchPanel"><Close /></el-icon>
          </div>
          <div class="search-panel-content">
            <!-- 搜索历史 -->
            <div v-if="searchHistory.length > 0" class="search-history">
              <div class="section-title">
                <span>搜索历史</span>
                <el-button type="text" @click="clearSearchHistory">清空</el-button>
              </div>
              <div class="history-list">
                <div
                    v-for="(item, index) in searchHistory"
                    :key="index"
                    class="history-item"
                    @click="handleMobileSearch(item)"
                >
                  <el-icon><Clock /></el-icon>
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 页脚 -->
    <footer v-if="!$route.meta.hideFooter" class="app-footer">
      <div class="footer-content">
        <!-- Logo和品牌信息 -->
        <div class="footer-brand">
          <img src="@/assets/logo.png" alt="MicroInvest Logo" class="footer-logo">
          <div class="brand-info">
            <h2>MicroInvest</h2>
            <p>引领金融科技的未来</p>
          </div>
        </div>

        <!-- 主要链接区域 -->
        <div class="footer-sections">
          <div class="footer-section">
            <div class="footer-section-header" @click="toggleFooterSection('about')">
              <h3>关于我们</h3>
              <el-icon class="section-arrow" :class="{ 'is-active': activeFooterSection === 'about' }">
                <ArrowDown />
              </el-icon>
            </div>
            <ul :class="{ 'is-active': activeFooterSection === 'about' }">
              <li><a href="/center/aboutUs">公司简介</a></li>
              <li><a href="/center/aboutUs">团队介绍</a></li>
              <li><a href="/center/aboutUs">招贤纳士</a></li>
              <li><a href="/center/aboutUs">联系我们</a></li>
            </ul>
          </div>

          <div class="footer-section">
            <div class="footer-section-header" @click="toggleFooterSection('help')">
              <h3>帮助中心</h3>
              <el-icon class="section-arrow" :class="{ 'is-active': activeFooterSection === 'help' }">
                <ArrowDown />
              </el-icon>
            </div>
            <ul :class="{ 'is-active': activeFooterSection === 'help' }">
              <li><a href="/center/helpUser">新手指南</a></li>
              <li><a href="/center/helpUser">常见问题</a></li>
              <li><a href="/center/helpUser">资金安全</a></li>
              <li><a href="/center/helpUser">交易规则</a></li>
            </ul>
          </div>

          <div class="footer-section">
            <div class="footer-section-header" @click="toggleFooterSection('service')">
              <h3>服务支持</h3>
              <el-icon class="section-arrow" :class="{ 'is-active': activeFooterSection === 'service' }">
                <ArrowDown />
              </el-icon>
            </div>
            <ul :class="{ 'is-active': activeFooterSection === 'service' }">
              <li><a href="/center/helpUser">意见反馈</a></li>
              <li><a href="/center/helpUser">投诉建议</a></li>
              <li><a href="/center/helpUser">服务条款</a></li>
            </ul>
          </div>

          <div class="footer-section">
            <div class="footer-section-header" @click="toggleFooterSection('more')">
              <h3>更多发现</h3>
              <el-icon class="section-arrow" :class="{ 'is-active': activeFooterSection === 'more' }">
                <ArrowDown />
              </el-icon>
            </div>
            <ul :class="{ 'is-active': activeFooterSection === 'more' }">
              <li><a href="#">投资课堂</a></li>
              <li><a href="#">研究报告</a></li>
              <li><a href="#">市场资讯</a></li>
            </ul>
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="footer-bottom">
          <div class="footer-legal">
            <a href="#">隐私政策</a>
            <span class="divider">|</span>
            <a href="#">法律声明</a>
            <span class="divider">|</span>
            <a href="#">网站地图</a>
          </div>
          <div class="footer-copyright">
            © 2024 MicroInvest. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, nextTick, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { Search, Menu, Close, ArrowDown, Clock } from '@element-plus/icons-vue'
import { useTokenStore } from "@/stores/token"
import userInfoStore from "@/stores/userInfo";
import {getUserInfoService} from "@/api/user/userget";
import {searchStockSymbol} from "@/api/stock/stocks";
const router = useRouter()
const isLoggedIn = ref(true)
const searchQuery = ref('')
const activeSubMenu = ref('')
let userAvatar = ref('')
const isSidebarOpen = ref(false)
const openSubMenu = ref('')
const isSearchPanelOpen = ref(false)
const searchHistory = ref([])
const mobileSearchQuery = ref('')
import toast from "@/utils/toast";
// 主菜单数据
const mainMenu = ref([
  {
    id: '1',
    title: '发现',
    children: [
      { id: '1-1', title: '大盘指数', path: '/center/findStock/marketOverview' },
      { id: '1-2', title: '板块行情' , path: '/center/stockNumAndSymbols'},
    ]
  },
  {
    id: '2',
    title: '自选股',
    children: [
      { id: '2-1', title: '我的自选',path: '/user/userStars' }
    ]
  },
  {
    id: '3',
    title: '交易中心',
    children: [
      { id: '3-1', title: '买入',path: '/user/userBuyStock' },
      { id: '3-2', title: '卖出',path: '/user/userSellStock' },
      { id: '3-3', title: '持仓',path: '/user/usersPositions' }
    ]
  },
  {
    id: '4',
    title: '更多',
    children: [
      { id: '4-1', title: '关于我们',path: '/center/aboutUs' },
      { id: '4-3', title: '帮助',path:'/center/helpUser' }
    ]
  }
])


onMounted(() => {
  const redirectPath = localStorage.getItem('afterLoginRedirect');
  if (redirectPath) {
    localStorage.removeItem('afterLoginRedirect'); // 用完就删
    router.replace(redirectPath); // 跳转到目标页面
  }
});

onMounted(async () => {
  //判断是否有token(是否登录)
  if (useTokenStore().hasToken) {
    //有登录获取信息
    const {code, data} = await getUserInfoService();
    if (code === 200) {
      //获取成功
      userInfoStore().setInfo(data)
    }
  }
});


onMounted(()=>{
  userAvatar=userInfoStore().info.profilePicture
})

// 打开搜索面板
const openSearchPanel = () => {
  console.log('Opening search panel') // 添加调试日志
  isSearchPanelOpen.value = true
  document.body.style.overflow = 'hidden'
  // 自动聚焦到搜索输入框
  nextTick(() => {
    const searchInput = document.querySelector('.panel-search-input input')
    if (searchInput) {
      searchInput.focus()
    }
  })
}

// 处理移动端搜索
const handleMobileSearch = async (query) => {
  // 如果没有传入query参数，说明是点击搜索图标打开面板
  if (query === undefined) {
    openSearchPanel()
    return
  }

  // 确保query是字符串类型
  const searchText = String(query).trim()

  if (!searchText) {
    toast.warning('请输入搜索内容')
    return
  }

  // 添加到搜索历史
  if (!searchHistory.value.includes(searchText)) {
    searchHistory.value.unshift(searchText)
    if (searchHistory.value.length > 10) {
      searchHistory.value.pop()
    }
  }

  try {
    const { code, data, message } = await searchStockSymbol(searchText)
    if (code === 200) {
      router.push({
        path: '/findStock/searchStock',
        query: { stockData: JSON.stringify(data) }
      })
    } else {
      toast.error(message)
    }
  } catch (e) {
    toast.error(e.message || '查询失败')
  }
  // 跳转后滚动到顶部
  window.scrollTo(0, 0)

  // 关闭搜索面板
  closeSearchPanel()

}

// 关闭搜索面板
const closeSearchPanel = () => {
  isSearchPanelOpen.value = false
  document.body.style.overflow = ''
  mobileSearchQuery.value=""
}

// 清空搜索历史
const clearSearchHistory = () => {
  searchHistory.value = []
}

// 切换侧边栏
const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
  if (isSidebarOpen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

// 切换子菜单
const toggleSubMenu = (id) => {
  openSubMenu.value = openSubMenu.value === id ? '' : id
}

// 显示子菜单
const showSubMenu = (id) => {
  activeSubMenu.value = id
}

// 隐藏子菜单
const hideSubMenu = () => {
  activeSubMenu.value = ''
}

// 处理菜单点击
const handleMenuClick = (id) => {
  let targetPath = null
  for (const group of mainMenu.value) {
    const foundItem = group.children.find(item => item.id === id)
    if (foundItem) {
      targetPath = foundItem.path
      break
    }
  }

  if (targetPath) {
    router.push(targetPath)
    // 滚动到页面顶部
    window.scrollTo(0, 0)
    // 关闭移动端侧边栏
    if (isSidebarOpen.value) {
      isSidebarOpen.value = false
      document.body.style.overflow = ''
    }
  }
  hideSubMenu()
}

// 处理搜索
const handleSearch = async () => {
  try {
    const { code, data, message } = await searchStockSymbol(searchQuery.value)
    if (code === 200) {
      router.push({
        path: '/findStock/searchStock',
        query: { stockData: JSON.stringify(data) }
      })
    } else {
      toast.error(message)
    }
  } catch (e) {
    toast.error(e.message || '查询失败')
  }
  // 跳转后滚动到顶部
  window.scrollTo(0, 0)
}

// Logo点击跳转
const toWelcome = () => {
  router.push('/center/welcome')
  // 滚动到页面顶部
  window.scrollTo(0, 0)
  // 关闭移动端侧边栏
  if (isSidebarOpen.value) {
    isSidebarOpen.value = false
    document.body.style.overflow = ''
  }
}



// 处理登出
const handleLogout = () => {
  isLoggedIn.value = false
  router.push('/user/login')
}

// 初始化
const hasToken = ref(!!useTokenStore().token)

//资产下拉菜单
const UserPropertyCommand=(command)=>{
  if (command==='property'){
    router.push('/user/portfolio')
    // 滚动到页面顶部
    window.scrollTo(0, 0)
    // 关闭移动端侧边栏
    isSidebarOpen.value = false
    document.body.style.overflow = ''
  }else if(command==='order'){
    router.push('/user/order')
    // 滚动到页面顶部
    window.scrollTo(0, 0)
    // 关闭移动端侧边栏
    isSidebarOpen.value = false
    document.body.style.overflow = ''
  }
}

// 下拉菜单处理
const handleUserCommand = (command) => {
  if (command === 'logout') {
    //移除token
    useTokenStore().removeToken()
    //移除用户信息
    userInfoStore().removeInfo()
    hasToken.value = false
    router.push('/user/auth')
    // 滚动到页面顶部
    window.scrollTo(0, 0)
  } else if (command === 'profile') {
    router.push('/account/profile')
    // 滚动到页面顶部
    window.scrollTo(0, 0)
  }else if(command==='security'){
    router.push('/account/profile')
    // 滚动到页面顶部
    window.scrollTo(0, 0)
  }
}

// 登录注册跳转
const goLogin = () => {
  router.push('/user/auth')
  // 滚动到页面顶部
  window.scrollTo(0, 0)
  // 关闭移动端侧边栏
  if (isSidebarOpen.value) {
    isSidebarOpen.value = false
    document.body.style.overflow = ''
  }
}

const goRegister = () => {
  router.push('/user/register')
  // 滚动到页面顶部
  window.scrollTo(0, 0)
  // 关闭移动端侧边栏
  if (isSidebarOpen.value) {
    isSidebarOpen.value = false
    document.body.style.overflow = ''
  }
}

// 页脚下拉菜单状态
const activeFooterSection = ref('')

// 切换页脚下拉菜单
const toggleFooterSection = (section) => {
  activeFooterSection.value = activeFooterSection.value === section ? '' : section
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #ffffff;
  color: #333;
}

/* 顶部导航栏样式 - 黑色主题优化版本 */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #000000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 1;
}

.logo-section {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease;
  order: -1; /* 确保Logo在最左边 */
}

.logo-section:hover {
  transform: scale(1.05);
}

.logo {
  height: 40px;
  width: 40px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.site-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

/* 主菜单样式 */
.main-menu {
  display: flex;
  gap: 8px;
  margin-left: 24px; /* Logo和菜单之间的间距 */
}

.menu-item {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.menu-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  border-radius: 12px;
  position: relative;
}

.menu-item:hover .menu-title {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

/* 子菜单样式 */
.sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background-color: #ffffff;
  min-width: 180px;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.sub-menu-item {
  padding: 12px 16px;
  color: #000000;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sub-menu-item:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateX(4px);
}

/* 右侧区域 */
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0; /* 防止右侧区域被压缩 */
}

/* 搜索框样式 */
.search-section {
  position: relative;
  order: 1; /* 搜索框在中间 */
}

.search-input {
  width: 320px;
}

.search-input :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 0 20px;
  height: 44px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.search-input :deep(.el-input__wrapper:hover) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

.search-input :deep(.el-input__inner) {
  color: #ffffff;
  font-size: 14px;
  background: transparent;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.search-input :deep(.el-input__prefix) {
  color: rgba(255, 255, 255, 0.7);
}

/* 移动端搜索按钮 */
.mi-search-section {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /*background-color: rgba(255, 255, 255, 0.1);*/
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mi-search-section:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.search-icon {
  color: #ffffff;
  font-size: 18px;
  transition: color 0.3s ease;
}

/* 用户资产管理 */
.user-property-dropdown {
  cursor: pointer;
  order: 2; /* 在登录注册之前 */
}

.user-property {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  /*background-color: rgba(255, 255, 255, 0.1);*/
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
  border-radius: 12px;
  color: #ffffff;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.user-property:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

.user-property p {
  margin: 0;
}


/* 用户头像 */
.user-dropdown {
  cursor: pointer;
  order: 3; /* 在登录注册之前 */
}

.user-avatar {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
  overflow: hidden;
}

.user-avatar:hover {
  border-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

/* 登录注册按钮 - 最右边 */
.login-register {
  display: flex;
  align-items: center;
  gap: 12px;
  order: 4; /* 确保在最右边 */
}

.login-btn {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.register-btn {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.register-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

/* 汉堡菜单 */
.hamburger-menu {
  display: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  color: #ffffff;
  transition: all 0.3s ease;
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
  order: 5; /* 最后 */
  /*background: rgba(255, 255, 255, 0.1);*/
}

.hamburger-menu:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.hamburger-menu .el-icon {
  color: #ffffff;
  font-size: 24px;
}

/* 侧边栏样式 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.sidebar {
  display: none;
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1001;
  transition: left 0.3s ease;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar-open {
  left: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background-color: #000000;
  color: #ffffff;
}

.sidebar-header .logo-section {
  color: #ffffff;
}

.close-icon {
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.close-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.sidebar-menu {
  padding: 24px 0;
}

.sidebar-menu-item {
  margin: 8px 16px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-menu-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.sidebar-menu-title:hover {
  background-color: #000000;
  color: #ffffff;
}

.arrow-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  font-size: 16px;
}

.arrow-down {
  transform: rotate(180deg);
}

.sidebar-submenu {
  background-color: rgba(0, 0, 0, 0.05);
  margin: 8px 16px;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-submenu-item {
  padding: 12px 20px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.sidebar-submenu-item:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateX(8px);
}

/* 主体内容样式 */
.main-content {
  margin: 64px 0 0;
  padding: 0px;
  width: 100%;
  box-sizing: border-box;
}

.content-container {
  background-color: #ffffff;
  border-radius: 4px;
}

/* 页脚样式 */
.app-footer {
  background-color: #000000;
  color: #eaeaea;
  padding: 80px 0 40px;
  margin-top: 0px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  gap: 20px;
}

.footer-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.brand-info h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.brand-info p {
  color: #999999;
  font-size: 16px;
}

.footer-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}

.footer-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}

.section-arrow {
  transition: transform 0.3s ease;
  font-size: 16px;
  color: #999;
  display: none;
}

.section-arrow.is-active {
  transform: rotate(180deg);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: none;
  overflow: visible;
  transition: max-height 0.3s ease-out;
}

.footer-section ul.is-active {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.footer-section ul li a {
  color: #999999;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}

.footer-section ul li a:hover {
  color: #ffffff;
}

.footer-legal a {
  color: #999999;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #ffffff;
}

.footer-bottom {
  padding-top: 40px;
  border-top: 1px solid #333333;
  text-align: center;
}

.footer-legal {
  margin-bottom: 20px;
}

.footer-legal .divider {
  margin: 0 15px;
  color: #333333;
}

.footer-copyright {
  color: #666666;
  font-size: 14px;
}

/* 搜索面板样式 */
.search-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: flex-end;
}

.search-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: #000;
  z-index: 10000;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  opacity: 0;
}

.search-panel-open {
  transform: translateX(0);
  right: 0;
  opacity: 1;
}

.search-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #000;
  border-bottom: 1px solid #333;
  transform: translateX(30px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.search-panel-open .search-panel-header {
  transform: translateX(0);
  opacity: 1;
}

.search-input-wrapper {
  flex: 1;
  margin-right: 15px;
  transform: translateX(30px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.search-panel-open .search-input-wrapper {
  transform: translateX(0);
  opacity: 1;
}

.panel-search-input {
  width: 100%;
}

.panel-search-input :deep(.el-input__wrapper) {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 0 15px;
  box-shadow: none;
  border: 1px solid #333;
  transition: all 0.3s ease;
}

.panel-search-input :deep(.el-input__wrapper:hover) {
  background: #222;
  border-color: #444;
}

.panel-search-input :deep(.el-input__wrapper.is-focus) {
  background: #222;
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.panel-search-input :deep(.el-input__inner) {
  color: #fff;
  font-size: 16px;
  height: 40px;
}

.panel-search-input :deep(.el-input__inner::placeholder) {
  color: #666;
}

.search-panel-content {
  padding: 20px;
  height: calc(100vh - 70px);
  overflow-y: auto;
  background: #000;
  transform: translateX(30px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.search-panel-open .search-panel-content {
  transform: translateX(0);
  opacity: 1;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: #1a1a1a;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #333;
  transform: translateX(30px);
  opacity: 0;
}

.search-panel-open .history-item {
  transform: translateX(0);
  opacity: 1;
}

.history-item:hover {
  background: #222;
  transform: translateY(-1px);
  border-color: #444;
}

.history-item .el-icon {
  color: #666;
}

.history-item span {
  color: #fff;
}

.search-panel .close-icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 50%;
}

.search-panel .close-icon:hover {
  background: #1a1a1a;
  transform: rotate(90deg);
}

/* 动画效果 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
}

.slide-fade-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 响应式设计 */
@media (max-width: 1140px) {
  .header-content {
    padding: 0 20px;
  }

  .header-left {
    gap: 20px;
  }

  .desktop-menu {
    display: none;
  }

  .search-section {
    display: none;
  }

  .mi-search-section {
    display: flex;
  }

  .hamburger-menu {
    display: block;
  }

  .user-property-dropdown {
    display: none;
  }

  .header-right {
    gap: 16px;
  }

  .login-register {
    gap: 8px;
  }

  .register-btn {
    padding: 8px 16px;
    font-size: 14px;
  }

  .sidebar-overlay {
    display: block;
  }

  .sidebar {
    display: block;
  }
}

@media (max-width: 768px) {
  .login-btn{
    display: none;
  }
  .header-content {
    padding: 0 16px;
    height: 56px;
  }

  .header-left {
    gap: 16px;
  }

  .logo {
    height: 32px;
    width: 32px;
  }

  .site-name {
    font-size: 18px;
  }

  .mi-search-section,
  .hamburger-menu {
    width: 40px;
    height: 40px;
    display: contents;
  }

  .sidebar {
    width: 280px;
  }

  .main-content {
    margin-top: 56px;
  }

  .search-panel {
    max-width: 100%;
  }

  /* 页脚响应式 */
  .footer-sections {
    grid-template-columns: 1fr;
  }

  .footer-section {
    border-bottom: 1px solid #333;
  }

  .footer-section:last-child {
    border-bottom: none;
  }

  .footer-section-header {
    padding: 15px 0;
    cursor: pointer;
  }

  .section-arrow {
    display: block;
  }

  .footer-section ul {
    max-height: 0;
    overflow: hidden;
    padding-left: 15px;
  }

  .footer-section ul.is-active {
    max-height: 500px;
  }

  .footer-section ul li {
    padding: 10px 0;
    text-align: left;
  }

  .footer-brand {
    flex-direction: column;
    text-align: center;
  }

  .footer-sections {
    grid-template-columns: 1fr;
  }

  .footer-section {
    text-align: center;
  }
}
/* 桌面端页脚样式 */
@media (min-width: 769px) {
  .footer-section-header {
    cursor: default;
    padding: 0 0 25px 0;
  }

  .footer-section ul {
    max-height: none;
    overflow: visible;
  }

  .footer-section ul li {
    margin-bottom: 15px;
  }
}

@media (max-width: 1024px) {
  .footer-sections {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 自定义滚动条 */
.sidebar::-webkit-scrollbar,
.search-panel-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.search-panel-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar-thumb,
.search-panel-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.search-panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Element Plus 样式覆盖 */
.el-dropdown,
.el-dropdown * {
  outline: none;
}

/* 性能优化 */
.main-header,
.sidebar,
.search-panel {
  will-change: transform;
}

.menu-item,
.sidebar-menu-item,
.history-item {
  will-change: transform;
}

.sidebar-asset-section {
  margin: 32px 16px 0 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sidebar-asset-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.sidebar-asset-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-asset-link {
  color: #333;
  background: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.sidebar-asset-link:hover {
  background: #1a1a1a;
  color: #fff;
}
</style>